<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东商城登录页面</title>
</head>
<body>
<style>
    .divtitle{
        width: 990px;
        margin: 0px auto;
        border: 1px solid red;
    }
    .divtitle:after{
        content: '';          /*在clear类后面添加内容为空*/
        display: block;      /*把添加的内容转化为块元素*/
        clear: both;         /*清除这个元素两边的浮动*/
    }
    .divtitle>img{
        float: left;
        /*margin-left: 80px;*/
    }
    .divtitle>h1{
        float: left;
        line-height: 15px;
        font-size: 22px;
        font-weight: 400;
        margin-left: 20px;
    }
    .divbody{
        width: 990px;
        height: 475px;
        margin: 0px auto;
        background-image: url("img/banner.png");
        background-repeat: no-repeat;
        border: 1px solid red;
    }
    .divlogin{
        width: 300px;
        height: 250px;
        border: 1px solid black;
        background-color: #FFFFFF;
        float: right;
        margin-top: 25px;
        padding: 10px;
    }
    .loginh2{
        font-weight: normal;
        font-size: 20px;
    }
    .loginh2 >a{
        color: red;
        text-decoration: none;
        float: right;
        font-size: 14px;
    }
    .loginitem{
        border: 1px solid gray;
        height: 38px;
        margin-top: 15px;
    }
    .loginitem>img{
        float: left;

    }
    .loginitem>input{
        float: left;
        height: 35px;
        width: 220px;
        border: none;
    }
    .autoLogin{
        font-size: 12px;
        margin-top: 15px;
    }
    .autoLogin>a{
        float: right;
        color: black;
        text-decoration: none;
    }
    .loginsub{
        background: red;
        color: #FFFFFF;
        width: 300px;
        height: 30px;
        border: none;
        margin-top: 15px;
    }
</style>
<header>
<div class="divtitle">
    <img src="img/logo.png" ><h1  >欢迎登陆</h1>
</div>
</header>
<section>
    <div class="divbody" ><!--     居中背景图-->
        <div class="divlogin">
           <form>
               <h2 class="loginh2">
                   京东会员
                   <a href="#"><img src="img/icon5.jpg" style="vertical-align: middle"> 立即注册</a>
               </h2>
               <div class="loginitem">
                   <img src="img/icon1.jpg">
                   <input name="userName" type="text" placeholder="邮箱/用户名/已验证手机">
               </div>
               <div class="loginitem">
                   <img src="img/icon2.jpg">
                   <input name="userName" type="password" >
               </div>
               <div class="autoLogin">
                   <input name="autoLogin" type="checkbox" >自动登陆
                   <a href="#" >忘记密码?</a>
               </div>
               <input class="loginsub" type="submit" value="登陆">
           </form>
        </div>
    </div>
</section>
<footer>


</footer>
</body>
</html>